<template>
  <div v-loading="loading">
    <div class="toolbar">
      <el-button class="property-button" type="primary" @click="toEditer(-1,null)" size='small'>增加属性</el-button>
      <el-button class="property-button" type="primary" @click="toGroupEditer(-2,null)" size='small'>增加分组</el-button>
      <el-button class="property-button" type="primary" @click="groupManagerShow=true" size='small'>分组管理</el-button>
      <el-button class="property-button" type="primary" :disabled="batch.selection.length==0" @click="batch.show=true" size='small'>批量设置分组</el-button>
    </div>
    
    <!-- <el-button class="property-button" type="danger" size='small' :disabled="batch.selection.length==0">批量删除</el-button> -->

    <el-table :data="propertyList" :fit='false' style="margin-top:50px;width:100%" size="mini" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50px"></el-table-column>
      <el-table-column type="index" labal="序号" width="50px"></el-table-column>
      <!-- <el-table-column prop="keyId" label="属性id" min-width="300px" align="left">
      </el-table-column>-->
      <el-table-column prop="keyName"  label="属性名称" min-width="300px" align="left">
      </el-table-column>
      <el-table-column label="属性类型" width="100px" align="left">
        <template slot-scope="scope">
            <span v-if="scope.row.propertyType=='TEXT'">文本</span>
            <span v-else-if="scope.row.propertyType=='URL'">链接</span>
            <span v-else-if="scope.row.propertyType=='IMAGE'">图片</span>
        </template>
      </el-table-column>
      <el-table-column prop='upid' label="属性分组" width="200px" align="left" :filters='groupFilter' :filter-method='doGroupFilter'>
        <template slot-scope="scope">
          {{getKeyNameByKeyId(scope.row.upid)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px"  align="left">
        <template slot-scope="scope">
          <el-button size="mini" @click='sortUp(scope.$index, scope.row)' :disabled="scope.$index<4">↑</el-button>
          <el-button size="mini" @click="toEditer(scope.$index, scope.row)" :disabled="scope.$index<3">编辑</el-button>
          <el-button size="mini" type="danger" @click="propertyDelete(scope.$index, scope.row)" :disabled="scope.$index<3">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <propertyEditer :editerData='editerData' @edited='edited'></propertyEditer>

    <el-dialog title="分组管理" :visible.sync="groupManagerShow" width="30%" center :close-on-click-modal='false' top="50px">
      <div id="group-main">
        <property-group :groupList="groupList" @toGroupEditor="toGroupEditer"></property-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupManagerShow=false" size="mini">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量设置分组" :visible.sync="batch.show" width="30%" center :close-on-click-modal='false' top="50px" @open="openBatchSetGroup">
      <div style="width:100%;text-align:center;">
        <span>已选属性数量: {{batch.selection.length}}</span>
      </div>
      <el-form label-position="right" label-width="100px" size="small" style="margin-top:30px">
        <el-form-item label='属性分组'>
          <el-select v-model="batch.groupId" placeholder="暂无分组">
            <el-option label="">暂无分组</el-option>
            <el-option v-for="item in groupList" :key="item.keyId" :label="item.keyName" :value="item.keyId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batch.show=false" size="mini">返回</el-button>
        <el-button @click="batchSetGroup" type="primary" size="mini">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import propertyGroup from "@/components/property/propertyGroup"
import propertyEditer from "@/components/property/propertyEditer"

export default {
  name: 'propertyManager',
  data(){
    return {
      groupManagerShow:false,
      loading:true,
      sortUping:false,
      propertyList:[],
      groupList:[],
      editerData:{
        show:false,
        propertyKey:{"keyId":"","keyName":"",'propertyType':'TEXT','upid':'基础属性'},
        groupList:[]
      },
      groupFilter:[],
      editing:null,
      deleting:null,
      batch:{
        show:false,
        groupId:"",
        selection:[]
      }
    };
  },
  methods:{
    propertyInit:function(){
      //获取属性列表,属性列表做分页，一页15个数据
      this.$http.post(this.$store.state.url+"/modelfilterinit").then(
        response=>{
          var propertyList=response.data.data;
          this.propertyList=propertyList;
          this.loading=false;
        }
      ).catch(
        error=>{}
      );
      //获取属性组列表,并生成基于属性组的筛选功能的过滤列表
      this.$http.post(this.$store.state.url+"/property/grouplist").then(
        response=>{
          var groupList=response.data.data;
          var groupFilter=[];
          for(var i=0;i<groupList.length;i++){
            var filter=new Object();
            filter.text=groupList[i].keyName;
            filter.value=groupList[i].keyId;
            groupFilter.push(filter);
          }
          this.groupFilter=groupFilter;
          this.groupList=groupList;
      }).catch(
        error=>{}
      );
    },
    //打开并初始化编辑器为属性编辑器
    toEditer:function(index,row){
      if(row==null){
        this.editerData.propertyKey.keyId="";
        this.editerData.propertyKey.propertyType="TEXT";
        this.editerData.propertyKey.upid="基础属性";
      }else{
        this.editerData.propertyKey.keyId=row.keyId;
      }
      this.editerData.groupList=this.groupList;
      this.editing=index;
      this.editerData.show=true;
    },
    //打开并初始化编辑器为属性组编辑器
    toGroupEditer:function(index,row){
      this.editerData.propertyKey.propertyType="GROUP_NAME";
      this.editerData.propertyKey.upid="";
      if(row){
        this.editerData.propertyKey.keyId=row.keyId;
      }else{
        this.editerData.propertyKey.keyId="";
      }
      this.editing=index;
      //this.groupManagerShow=false;
      this.editerData.show=true;
    },
    //编辑结束后同步显示数据
    edited:function(propertyKey){
      this.propertyInit();
      /*
      var list=this.propertyList;
      if(this.editing==-1)list.push(propertyKey);
      else if(this.editing==-2)this.groupList.push(propertyKey);
      else for(var key in propertyKey)list[this.editing][key]=propertyKey[key];*/
    },
    //删除属性
    propertyDelete:function(index,row){
      this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleting=index;
          var params=new URLSearchParams();
          params.append('keyId',row.keyId);
          this.$http.post(this.$store.state.url+'/property/delete',params).then(
            response=>{
              if(response.data.status==200){
                this.propertyList.splice(this.deleting,1);
                this.$message({message: '删除成功',type: 'success'});
              }else{
                this.$message.error(response.data.message);
              }
            }
          ).catch(
            error=>{this.$message.error('删除失败');}
          );
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除'});
        }
      );
    },
    //排序上移
    sortUp:function(index,row){
      if(index<4)return;
      if(this.sortUping)return;
      this.sortUping=true;
      var params=new URLSearchParams();
      params.append('token','1');
      params.append('userId','1');
      params.append('keyId',row.keyId);
      this.$http.post(this.$store.state.url+'/property/sortup',params).then(
        response=>{
          if(response.data.status==200){
            var p=this.propertyList[index-1];
            var t='';
            for(var key in row){
              if(key!='sort'){
                t=row[key];
                row[key]=p[key];
                p[key]=t;
              }
            }
          }
          this.sortUping=false;
        }
      ).catch(
        error=>{
          this.sortUping=false;
        }
      );
    },
    //筛选过滤
    doGroupFilter:function(value, row){
      return row.upid === value;
    },
    handleSelectionChange:function(val){
      this.batch.selection=val;
    },
    openBatchSetGroup:function(){
      this.batch.groupId="";
    },
    batchSetGroup:function(){
      this.loading=true;
      this.batch.show=false;
      var params=new URLSearchParams();
      params.append('groupId',this.batch.groupId);
      var selection=this.batch.selection;
      for(var i=0;i<selection.length;i++)params.append("keyIds",selection[i].keyId);
      this.$http.post(this.$store.state.url+'/property/batchsetgroup',params).then(
        response=>{
          if(response.data.status==200){
            this.$message({message: '分组变更成功',type: 'success'});
            this.propertyInit();
          }else{
            this.$message.error(response.data.message);
          }
        }
      ).catch(error=>{});
    },
    getKeyNameByKeyId(keyId){
      for(let group of this.groupList){
        if(group.keyId==keyId){
          return group.keyName;
        }
      }
    }
  },
  created(){
    this.propertyInit();
  },
  components:{
    propertyGroup:propertyGroup,
    propertyEditer:propertyEditer
  }
}

</script>

<style scoped>
.toolbar{
  position: fixed;
  top:60px;
  height:50px;
  padding-top:20px;
  width: 900px;
  background:white;
  z-index:2
}
</style>
